"use client";
import React from "react";
import { memo } from "react";
import { useMemo } from "react";
import styles from "./links.module.css";
import NavLink from "./navLink/navLink";
import { useState } from "react";
import { useCallback } from "react";
import { onLogout } from "@/lib/action";
const Links = ({ session }) => {
  const [open, setOpen] = useState(false);
  const Links = useMemo(() => {
    return [
      { title: "Homepage", path: "/" },
      { title: "About", path: "/about" },
      { title: "Contact", path: "/contact" },
      { title: "Blog", path: "/blog" },
    ];
  }, []);

  const onClickMenu = useCallback(() => {
    setOpen(!open);
  }, [open]);
  console.log("session", session);
  return (
    <div className={styles.container}>
      <div className={styles.links}>
        {Links.map((link, index) => {
          return <NavLink key={index} link={link} />;
        })}

        {session?.user ? (
          <>
            {session.user?.isAdmin && (
              <NavLink link={{ title: "Admin", path: "/admin" }} />
            )}
            <form action={onLogout}>
              <button className={styles.logout}>Logout</button>
            </form>
          </>
        ) : (
          <NavLink link={{ title: "Login", path: "/login" }} />
        )}
      </div>
      <button className={styles.menuBtn} onClick={onClickMenu}>
        menu
      </button>
      {open && (
        <div className={styles.mobileLinks}>
          {Links.map((link, index) => {
            return <NavLink key={index} link={link} />;
          })}
          {/* {session ? (
            <>
              {isAdmin && (
                <NavLink link={{ title: "Admin", path: "/admin" }} />
              )}
              <button className={styles.logout}>Logout</button>
            </>
          ) : (
            <NavLink link={{ title: "Login", path: "/login" }} />
          )} */}
        </div>
      )}
    </div>
  );
};

export default memo(Links);
